<script setup>
import {ref} from 'vue';
import {message} from 'ant-design-vue';
import NoticeAddForm from '@/views/notice/noticeAddForm.vue';
import NoticeQueryForm from '@/views/notice/noticeQueryForm.vue';
import {useNoticeStore} from '@/stores/noticeStore.js';
import {noticeDelete} from '@/api/noticeApi.js';
import {loading} from '@/utils/loadingUtils.js'
import {PlusOutlined} from '@ant-design/icons-vue';

import * as commonDict from '@/utils/commonDict.js'

const columns = [

  {
    title: '标题',
    dataIndex: 'title',
    width: 300,
    align: 'center'
  },
  {
    title: '封面',
    dataIndex: 'files',
    width: 300,
    align: 'center'
  },

  {
    title: '内容',
    dataIndex: 'content',
    width: 300,
    align: 'center'
  },


  {
    title: '发布日期',
    dataIndex: 'publishDate',
    width: 300,
    align: 'center'
  },

  {
    title: '状态',
    dataIndex: 'status',
    width: 300,
    align: 'center'
  },

  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 300,
    align: 'center'
  },

  {
    title: '操作',
    dataIndex: 'action',
  },

]
const formRef = ref(null)


const noticeStore = useNoticeStore()
noticeStore.getNoticePage()


async function handleDelete(id) {
  await noticeDelete(id)
  message.success('删除成功')
  await noticeStore.getNoticePage()
}
</script>

<template>

  <NoticeAddForm ref="formRef" @save-successful="noticeStore.getNoticePage"></NoticeAddForm>
  <NoticeQueryForm></NoticeQueryForm>

  <a-card :bordered="false" class="mt-2">
    <a-table
        class="ant-table-striped"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        bordered :columns="columns" :data-source="noticeStore.noticePage" :loading="loading">

      <template #title>
        <div class="flex justify-between">
          <a-space>
            <a-button @click="formRef.onOpen()" type="primary">
              <template #prefix>
                <PlusOutlined/>
              </template>
              新增
            </a-button>
          </a-space>
        </div>
      </template>

      <template #bodyCell="{ text, record, column }">

        <template v-if="column.dataIndex === 'files'">
          <div v-if="record.files && record.files.length > 0" style="width: 150px;height: 150px;">
            <img class="w-full h-full object-cover" :src="record.files[0]" alt="">
          </div>
        </template>

        <template v-if="column.dataIndex === 'status'">
          {{commonDict.pubStatus[text]}}
        </template>

        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a-button type="link" @click="formRef.onOpen(record.id)">编辑</a-button>
            <a-popconfirm
                title="是否确认删除?"
                ok-text="删除"
                cancel-text="取消"
                @confirm="handleDelete(record.id)"
            >
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </template>


    </a-table>

  </a-card>
</template>

<style scoped>
[data-doc-theme='light'] .ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
[data-doc-theme='dark'] .ant-table-striped :deep(.table-striped) td {
  background-color: rgb(29, 29, 29);
}
</style>
